<template>
	<view class="history-item" @click="jump(detail.id)">
		<view class="item-icon">
			<image class="icon" src="https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/2001be84-4879-4dd3-98e0-3742fe12896d.png"/>
		</view>
		<view class="item-info-wrapper">
			<view class="info-top-wrapper">
				<view class="top-top-wrapper">
					<view class="title">
						{{detail.title}}
					</view>
					<view class="amount">
						￥{{detail.amount}}
					</view>
				</view>
				<view class="top-bottom-wrapper">
					编号：{{detail.task_code}}
				</view>
			</view>
			<view class="info-botton-wrapper">
				<view class="date">
					{{detail.created_at}}
				</view>
				<view class="status" :class="status_color">
					{{detail.status_name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, defineProps } from 'vue';
	import type { IHistoryDetail } from './types';
	import { WITHDRAWAL_STATUS, RECEIPT_CHANNEL,WITHDRAWAL_STATUS_TEXT_COLOR } from '@/enum/withdrawal';

	interface IProps {
		detail : IHistoryDetail,
	}

	const props = withDefaults(defineProps<IProps>(), {
		detail: () => {
			return {
				task_code: '',
				amount: '',
				check_time: '',
				created_at: '',
				status: WITHDRAWAL_STATUS.PENDING,
				receipt_channel: RECEIPT_CHANNEL.NOT_REMITTANCE,
				title: '',
				status_name: '',
				receipt_channel_name: '',
				id:0,
			}
		},
	});

	const status_color = computed(() => {
		switch (props.detail.status) {
			case WITHDRAWAL_STATUS.PENDING:
			return WITHDRAWAL_STATUS_TEXT_COLOR.PENDING;

			case WITHDRAWAL_STATUS.CHECK_SUCCESS:
			return WITHDRAWAL_STATUS_TEXT_COLOR.CHECK_SUCCESS;
			
			case WITHDRAWAL_STATUS.CHECK_FAIL:
			return WITHDRAWAL_STATUS_TEXT_COLOR.CHECK_FAIL;
		}
	})
	
	const jump = (id:number)=>{
		uni.router.route({
			url:'/pages_withdrawal/withdrawal_detail/withdrawalDetail',
			params:{
				id,
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./historyItem.scss";
</style>